<template>
	<view class="page preview">
		<swiper circular class="swiper">
			<swiper-item v-for="item in 6" :key="item" @click="maskstatus=!maskstatus">
				<image src="/static/preview1.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 包裹层 -->
		<transition name="mask">
			<view class="mask" v-if="maskstatus">
				<view class="back" :style="{top:`${StatusBarHeight}px`}">
					<uni-icons type="back" color="#fff" size="20" @click="goBack"></uni-icons>
				</view>
				<view class="count">3 / 9</view>
				<view class="time">
					<uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
				</view>
				<view class="date">
					<uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
				</view>
				<view class="footer">
					<view class="item" @click="openInfo">
						<uni-icons type="info" size="28"></uni-icons>
						<view class="text">信息</view>
					</view>
					<view class="item" @click="openRate">
						<uni-icons type="star" size="28"></uni-icons>
						<view class="text">5分</view>
					</view>
					<view class="item">
						<uni-icons type="download" size="24"></uni-icons>
						<view class="text">下载</view>
					</view>
				</view>
			</view>
		</transition>
		<!-- 壁纸信息弹窗 -->
		<uni-popup ref="infoRef" class="info-popup" type="bottom">
			<view class="info-wrapper">
				<view class="title">
					<view></view>
					壁纸信息
					<view class="close" @click="infoRef.close">
						<uni-icons type="close" size="30"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y>
					<view class="content">
						<view class="row">
							<label>壁纸ID：</label>
							<text selectable>44454545454545</text>
						</view>
						<view class="row">
							<label>分类：</label>
							<text class="focus">明星</text>
						</view>
						<view class="row">
							<label>发布者：</label>
							<text>郑昊</text>
						</view>
						<view class="row" style="align-items: center;">
							<label>评分：</label>
							<view>
								<uni-rate value="3" size="20" readonly></uni-rate>
							</view>
						</view>
						<view class="row">
							<label>摘要：</label>
							<text>NBA再次贡献射界明后，文班亚马封盖杜兰特名场面</text>
						</view>
						<view class="row">
							<label>标签：</label>
							<view class="marks">
								<view>甩锅</view>
								<view>甩锅</view>
								<view>甩锅</view>
								<view>甩锅</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 壁纸评分弹窗 -->
		<uni-popup ref="scoreRef" class="rate-popup" type="center">
			<view class="score-wrapper">
				<view class="title">
					<view></view>
					壁纸评分
					<view class="close" @click="scoreRef.close">
						<uni-icons type="close" size="30"></uni-icons>
					</view>
				</view>
				<view class="content">
					<view class="score">
						<uni-rate v-model="score" @change="rateChange"></uni-rate>
						<text>{{score}}分</text>
					</view>
					<view class="footer">
						<button @click="confirmRate" type="default" :disabled="score==0" size="mini" plain>确认评分</button>
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import {StatusBarHeight} from "../../utils/system.js";
	import {GetWallDetail} from "../../api/index.js";
	const maskstatus = ref(false);
	const score = ref(0);
	const scoreRef = ref(null);
	const infoRef = ref(null);

	// 打开信息弹窗
	const openInfo = () => {
		infoRef.value.open();
	}

	// 打开评分弹窗
	const openRate = () => {
		scoreRef.value.open();
	}

	// 评分变化
	const rateChange = (e) => {
		console.log(e)
	}

	// 确认评分
	const confirmRate = () => {
		uni.showToast({
			title: "评分成功"
		})
	}
	// 返回上一页
	const goBack = ()=>{
		uni.navigateBack({
			success() {
				
			},
			fail() {
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
.mask-enter-active,
.mask-leave-active {
	transition: all 0.3s ease-out;
}
.mask-enter-from,
.mask-leave-to {
	opacity: 0;
}
.preview {
	padding: 0rpx;
	width: 100vw;
	height: 100vh;
	position: relative;

	.swiper {
		width: 100%;
		height: 100vh;

		image {
			width: 100%;
			height: 100vh;
		}
	}

	.mask {

		.back,
		.count,
		.time,
		.date,
		.footer {
			position: absolute;
			width: fit-content;
			left: 0;
			right: 0;
			margin: auto;
			color: #fff;
			z-index: 2;
		}

		.back {
			width: 60rpx;
			height: 60rpx;
			background-color: rgba(0, 0, 0, 0.5);
			left: 30rpx;
			top: 30rpx;
			margin-left: 0;
			border-radius: 100rpx;
			backdrop-filter: blur(10rpx);
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.count {
			top: 10vh;
			background-color: rgba(0, 0, 0, 0.42);
			font-size: 28rpx;
			border-radius: 40rpx;
			padding: 8rpx 40rpx;
			backdrop-filter: blur(4rpx);
		}

		.time {
			font-size: 140rpx;
			top: calc(10vh + 80rpx);
		}

		.date {
			font-size: 34rpx;
			top: calc(10vh + 260rpx);
			text-shadow: 0 2rpx rgba(0, 0, 0, 0.4);
		}

		.footer {
			background-color: rgba(255, 255, 255, 0.8);
			bottom: 10vh;
			width: 65vw;
			height: 120rpx;
			border-radius: 120rpx;
			color: #000;
			display: flex;
			justify-content: center;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 0rpx 20rpx;
				padding: 4rpx 20rpx;

				.text {
					font-size: 26rpx;
					color: #777;
				}
			}
		}
	}

	.info-popup {
		.info-wrapper {
			background-color: #fff;
			padding: 20rpx 30rpx 50rpx 50rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;

			.title {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				border-bottom: 1rpx solid #ddd;
				font-weight: bold;
				position: relative;
				text-align: center;

				.close {
					position: absolute;
					padding: 12rpx;
					right: 0rpx;
					top: -16rpx;
					font-weight: normal;
				}
			}

			scroll-view {
				max-height: 60vh;

				.content {
					.row {
						display: flex;
						padding: 16rpx 0rpx;
						font-size: 32rpx;
						line-height: 1.4em;

						label {
							color: #777;
							width: 140rpx;
							text-align: right;
							font-size: 30rpx;
						}

						>text,
						>view {
							flex: 1;
						}

						.focus {
							color: #0cc90c;
						}

						.marks {
							display: flex;
							flex-wrap: wrap;

							view {
								border: 1rpx solid #0cc90c;
								color: #0cc90c;
								font-size: 22rpx;
								padding: 10rpx 30rpx;
								border-radius: 40rpx;
								line-height: 1em;
								margin: 0 10rpx 10rpx 0;
							}
						}
					}
				}
			}
		}
	}

	.rate-popup {
		.score-wrapper {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 30rpx;
			overflow: hidden;
			width: 560rpx;

			.title {
				justify-content: space-between;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				border-bottom: 1rpx solid #ddd;
				position: relative;
				text-align: center;
				font-weight: bold;
				.close {
					font-weight: normal;
					position: absolute;
					padding: 12rpx;
					right: 0rpx;
					top: -16rpx;
				}
			}

			.content {
				.score {
					padding-top: 10rpx;
					display: flex;
					justify-content: center;
					margin-bottom: 30rpx;
				}

				.footer {
					text-align: center;
					padding-bottom: 20rpx;

					button {
						margin: 0rpx auto;
					}
				}
			}
		}
	}
}
</style>